<template >
  <div style="padding:10px;">
      <div class="app-container">
        <div class="filter-container">
          <el-button v-if="role == '4'"   class="filter-item" type="success" icon="el-icon-plus"  @click="addStock('add','ruleForm')">
            添加
          </el-button>    
          </div>         
         <!-- 表格 -->
         <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
       <el-table-column align="center" label="ID"  min-width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.noticeId === null">--</span>
          <span v-else> {{scope.row.noticeId}} </span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="公告内容"  min-width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.notice === null">--</span>
          <span v-else> {{scope.row.notice}} </span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="显示"  min-width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.isShow === null">--</span>
          <span v-else-if="scope.row.isShow == 1">显示</span>
          <span v-else>不显示</span>
        </template>
      </el-table-column>

      <el-table-column v-if="role == '4'"  align="center" label="操作"  min-width="200">
           <template scope="scope">
              <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row,'ruleForm')">修改</el-button>
              <el-button type="danger" size="mini" @click="delEdit(scope.$index, scope.row,'ruleForm')">删除</el-button>
           </template>
      </el-table-column>
      
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"  @pagination="fetchData"/>

    <div class='formPosition' v-if='dialogFormVisible'>
   <div class='titleForm'>
          <div class='left_titleForm'>{{titleName}}</div>
          <span class="icon iconfont right_titleForm" @click="resetForm('ruleForm')">&#xe72d;</span>
   </div>
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm " :visible.sync="dialogFormVisible">
          
            <el-form-item v-if="this.titleName == '修改'" label="ID" >
                <el-input v-model="ruleForm.noticeId"></el-input>
            </el-form-item>
          
            <el-form-item label="公告内容" prop="notice">
                <el-input type="textarea" v-model="ruleForm.notice"></el-input>
            </el-form-item>

            <el-form-item label="显示" >
                 <el-switch v-model="ruleForm.isShow" 
                  active-value="1"
                  inactive-value="0"
                  active-text="显示"
                  inactive-text="不显示"
                 ></el-switch>
            </el-form-item>

          <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
     </el-form>
    </div>
         
  </div>
</div>
</template>


<script>
import { getNoticeList ,addNoticeList ,delNoticeList ,modifyNoticeList } from '@/api/notice'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      role:'',
      selectValue: '',
      titleName:'',
      list: null,
      listLoading: true,
      total: 0,
      dialogFormVisible:false,
      listQuery:{
           page: 1,
           limit: 10,
      },
      ruleForm: {
          isShow:'',
          noticeId:'',
          notice:'',
          deliver:false
        },
      cleanForm:{
           isShow:'',
          noticeId:'',
          notice:'',
          deliver:false
      },
        rules: {
          notice: [
            { required: true, message: '请输入公告内容', trigger: 'blur' }
          ]
        }
    }
  },
  created() {
        const userInfo = localStorage.getItem('userInfo');
        this.role = JSON.parse(userInfo).role;
        this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const paramsData = {curPage:this.listQuery.page,pageSize:this.listQuery.limit}
      getNoticeList(paramsData).then(res => {
          this.total = res.data.countNum;
          this.list = res.data.obj;
          this.listLoading = false
      })
    },
   submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             if(this.titleName == "添加"){
                this.handleAdd(formName)
             }else{
                this.handleModify(formName)
             }
              this.listLoading = false;
              this.resetForm(formName) 
          } else {
            console.log('提交失败');
            return false;
          }
        });
      },
       handleAdd(formName){//添加
            const paramsData = {
                    notice:this.ruleForm.notice,
                    isShow:this.ruleForm.isShow
                }
              addNoticeList(paramsData).then(res => {
                this.list = res.data;
               if(res.code == '200'){
                        this.$notify({
                        message: '添加成功',
                        type: 'success',
                        duration: 2000
                    })
                  }else{
                    this.$notify({
                        message: '添加失败',
                        type: 'error',
                        duration: 2000
                    })
                  }
                  this.fetchData()//获取列表
            })
      },
      handleModify(formName){//修改
             const paramsData = {
                    noticeId:this.ruleForm.noticeId,
                    notice:this.ruleForm.notice,
                    isShow:this.ruleForm.isShow
                  }
                modifyNoticeList(paramsData).then(res => {
                  this.list = res.data;
                  if(res.code == '200'){
                        this.$notify({
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    })
                  }else{
                    this.$notify({
                        message: '修改失败',
                        type: 'error',
                        duration: 2000
                    })
                  }
                  this.fetchData()//获取列表
              })
      },
      delEdit(index, row ,formName){
            const paramsData = {noticeId:row.noticeId}
            delNoticeList(paramsData).then(res => {
                  this.list = res.data;
                  if(res.code == '200'){
                       if (this.total % this.listQuery.limit === 1) {    // 表格总数量 % 行数  余出的就是当前页有几个
                        const lastPage = (this.total + this.listQuery.limit - 1) / this.listQuery.limit  // （表格总数量 +行数 -1) / 行数
                        if (this.listQuery.page === lastPage) { // 当前页 === （表格总数量 +行数 -1) / 行数
                          this.listQuery.page = this.listQuery.page - 1 // 减去一页就是前一页
                        }
                      }
                        this.$notify({
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    })
                  }else{
                    this.$notify({
                        message: '删除失败',
                        type: 'error',
                        duration: 2000
                    })
                  }
                  this.fetchData()//获取列表
              })
      },
      resetForm(formName) {
          this.ruleForm = this.cleanForm;
          this.$refs.ruleForm.resetFields();
          this.dialogFormVisible = false; 
      },
      addStock(formName){//处理弹出框添加和修改的状态
        this.dialogFormVisible = true;     
        this.titleName = '添加'
      },
    change(state){
       if(state == true){
          this.ruleForm.isShow = 1
        }else{
          this.ruleForm.isShow = 0
        }
    },
      handleEdit(index, row ,formName) {//修改
          this.titleName = '修改'
          this.dialogFormVisible = true;
          this.ruleForm = Object.assign({}, row);
      }
      
    }
  
 }
</script>
<style lang="scss">
 .filter-container{
   margin-bottom:20px;
 }
 .el-date-range-picker{
   margin-left:25%;
 }
 .inp_search{
   width:20%;
   margin-right:1%;        
 }
 .formPosition{
    width:70%;
    height:auto;
    background:#fff;
    position:absolute;
    left:15%;
    top:5%;
    z-index:999;
    padding:30px;
    box-shadow: 0px 0px 5px 5px #eee;
    border-radius: 5px;
 }
 .demo-ruleForm{
      width:50%;     
 }
 .titleForm{
     width:100%;
     height:30px;
     line-height:30px;
     margin-bottom:20px;
     font-size:1.1em;
     font-weight: 500;
 }
 .left_titleForm{
    float:left;
 }
 .right_titleForm{
    display:block;
    float:right;
 }
 .select_roles{
    width:100%;
 }
 
</style>
